<template>
  <section>
    <el-form label-width="80px" size="mini">
      <el-form-item label="">
        <el-popover placement="right" width="400" trigger="click">
          <el-table :data="scaleList" border size="mini">
            <el-table-column label="序号" type="index"/>
            <el-table-column label="宽(px)" prop="width"></el-table-column>
            <el-table-column label="高(px)" prop="height"></el-table-column>
          </el-table>
          <span slot="reference" class="tip">*建议尺寸 ▶</span>
        </el-popover>
      </el-form-item>
      <el-form-item label="介绍页面">
        <div class="form-item" @click="editImg('introduceImg')">
          <el-popover placement="right" trigger="hover" v-if="activity.data.introduceImg" >
            <div class="popover">
              <img :src="activity.data.introduceImg" width="100%"/>
            </div>
            <span slot="reference" class="tip">
              <img :src="activity.data.introduceImg" width="100px"/>
            </span>
          </el-popover>
          <i v-else class="el-icon-plus"@click="editImg('introduceImg')"></i>

          <!--<upload-img v-on:get="getImgUrl($event,'introduceImg')"></upload-img>-->
          <!--<el-input size="mini" v-model="activity.data.introduceImg" class="input"/>-->
          <!--<el-popover placement="right" trigger="hover" v-if="activity.data.introduceImg" >-->
          <!--<div class="popover">-->
          <!--<img :src="activity.data.introduceImg" width="60%"/>-->
          <!--</div>-->
          <!--<span slot="reference" class="tip">预览 ▶</span>-->
          <!--</el-popover>-->
        </div>
      </el-form-item>
      <el-form-item label="分享页面" >
        <div class="form-item" @click="editImg('shareImg')">
          <el-popover placement="right" trigger="hover" v-if="activity.data.shareImg" >
            <div class="popover">
              <img :src="activity.data.shareImg" width="100%"/>
            </div>
            <span slot="reference" class="tip">
              <img :src="activity.data.shareImg" width="100px" v-if="activity.data.shareImg"/>
            </span>
          </el-popover>
          <i v-else class="el-icon-plus"@click="editImg('shareImg')"></i>
        </div>
      </el-form-item>
    </el-form>
    <el-dialog title="选择图片" :visible.sync="showSelImgDialog" v-if="showSelImgDialog" append-to-body>
      <choice-box :show-dialog="showSelImgDialog" @cancel="showSelImgDialog=false" @success="fileCallback($event,imgType)"></choice-box>
    </el-dialog>
  </section>
</template>

<script>
  import choiceBox from '@/components/fileManager/subs/choiceBox'
  import uploadImg from '@/common/uploadImg'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "actImg",
    components: {uploadImg,choiceBox},
    props: ['activity'],
    data(){
      return{
        showSelImgDialog:false,
        scaleList:[
          {width:'400',height:'480'},
          {width:'320',height:'480'}
        ],
        imgType:null
      }
    },
    created(){
      console.log(this.activity)
      if(!this.activity.data.shareImg){
        Vue.set(this.activity.data,'shareImg','')
      }
      if(!this.activity.data.introduceImg){
        Vue.set(this.activity.data,'introduceImg','')
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      editImg(type){
        this.imgType=type
        this.showSelImgDialog=true
      },
      fileCallback(file,type){
        let newUri=file[file.length-1].uri
        this.activity.data[type]=newUri
        this.showSelImgDialog=false
      },
      getImgUrl(data,type){
        console.log('获取图片————————————————',data)
        this.activity.data[type]=data[0].url
      },
      updateActivity(tmp){
        console.log(tmp)
        this.fetch({name:"updateActivity",data:{...tmp}})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>
  .tip{
    color:blue;
  }
  .form-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 5px;
    width: 100px;
    min-height: 100px;
  }
  .input{
    width: 70%;
  }
  .popover{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>
